<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2025/7/6
  Time: 10:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>商场消防云平台 - 视频监控系统</title>
    <script src="js/jquery-3.7.1.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }
        .header {
            background-color: #409EFF;
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header h1 {
            margin: 0;
        }
        .nav {
            background-color: #333;
            overflow: hidden;
            display: flex;
        }
        .nav a {
            color: white;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }
        .nav a:hover {
            background-color: #ddd;
            color: black;
        }
        .nav a.active {
            background-color: #f44336;
            color: white;
        }
        .container {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        /* 视频监控特有样式 */
        .video-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-top: 20px;
        }
        .video-card {
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
            background-color: white;
            box-shadow: 0 0 5px rgba(0,0,0,0.1);
        }
        .video-header {
            background-color: #f8f9fa;
            padding: 12px;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #ddd;
        }
        .video-content {
            height: 300px;
            background-color: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
        .video-content img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .video-footer {
            padding: 12px;
            text-align: right;
            border-top: 1px solid #ddd;
            background-color: #f8f9fa;
        }
        /* 状态样式 */
        .status-normal {
            color: green;
        }
        .status-error {
            color: red;
            font-weight: bold;
        }
        /* 按钮样式 */
        .operation-btn {
            padding: 6px 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 5px;
            font-size: 14px;
        }
        .play-btn {
            background-color: #409EFF;
            color: white;
        }
        .record-btn {
            background-color: #f44336;
            color: white;
        }
        .snapshot-btn {
            background-color: #67c23a;
            color: white;
        }
        .add-btn {
            padding: 8px 20px;
            background-color: #67c23a;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-bottom: 10px;
            font-size: 14px;
        }
        /* 弹窗样式 */
        .modal-mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 999;
        }
        .modal {
            width: 600px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0,0,0,0.2);
            overflow: hidden;
        }
        .modal-header {
            padding: 15px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #ddd;
            font-size: 18px;
            font-weight: bold;
        }
        .modal-body {
            padding: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .form-group input, .form-group select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .modal-footer {
            padding: 15px;
            background-color: #f8f9fa;
            border-top: 1px solid #ddd;
            text-align: right;
        }
        .modal-footer button {
            padding: 8px 20px;
            margin-left: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .btn-save {
            background-color: #409EFF;
            color: white;
        }
        .btn-cancel {
            background-color: #ccc;
            color: #333;
        }
        /* 全屏按钮 */
        .fullscreen-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 30px;
            height: 30px;
            background-color: rgba(0,0,0,0.5);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
<div class="header">
    <h1>商场消防云平台</h1>
    <div>
        <a href="LogoutServlet">退出登录</a>
    </div>
</div>

<div class="nav">
    <a href="main.jsp">首页</a>
    <a href="fire_alarm_list.jsp">火灾报警系统</a>
    <a href="equipment_management.jsp">消防设备管理系统</a>
    <a href="inspection_system.jsp" >设备巡检系统</a>
    <a href="video_monitoring.jsp"class="active">视频监控系统</a>
    <a href="emergency_plan.jsp">应急预案管理</a>
    <%
        // 获取 Session 中的用户角色，假设之前登录时已存入 "role"
        String role = (String) session.getAttribute("role");
        if ("管理人员".equals(role)) { // 仅管理人员显示以下链接
    %>
    <a href="duty_staff.jsp">检查人员管理</a>
    <a href="system.jsp">系统管理</a>
    <% } %>
    <a href="change_password.jsp">修改密码</a>
</div>

<div class="container">
    <h2>视频监控系统</h2>
    <button class="add-btn" onclick="showAddModal()">添加监控摄像头</button>

    <div class="video-container" id="videoContainer">
        <!-- 视频数据将通过 AJAX 加载 -->
        <div class="video-card">
            <div class="video-header">
                <span>A栋1楼大厅</span>
                <span class="status-normal">在线</span>
            </div>
            <div class="video-content">
                <img src="https://picsum.photos/800/600?random=1" alt="监控画面">
                <button class="fullscreen-btn" onclick="toggleFullscreen(this)">⛶</button>
            </div>
            <div class="video-footer">
                <button class="operation-btn play-btn">播放</button>
                <button class="operation-btn record-btn">录像</button>
                <button class="operation-btn snapshot-btn">截图</button>
            </div>
        </div>

        <div class="video-card">
            <div class="video-header">
                <span>B栋2楼通道</span>
                <span class="status-normal">在线</span>
            </div>
            <div class="video-content">
                <img src="https://picsum.photos/800/600?random=2" alt="监控画面">
                <button class="fullscreen-btn" onclick="toggleFullscreen(this)">⛶</button>
            </div>
            <div class="video-footer">
                <button class="operation-btn play-btn">播放</button>
                <button class="operation-btn record-btn">录像</button>
                <button class="operation-btn snapshot-btn">截图</button>
            </div>
        </div>

        <div class="video-card">
            <div class="video-header">
                <span>地下车库入口</span>
                <span class="status-error">离线</span>
            </div>
            <div class="video-content">
                <div style="color: white;">设备离线，请检查连接</div>
            </div>
            <div class="video-footer">
                <button class="operation-btn play-btn" disabled>播放</button>
                <button class="operation-btn record-btn" disabled>录像</button>
                <button class="operation-btn snapshot-btn" disabled>截图</button>
            </div>
        </div>

        <div class="video-card">
            <div class="video-header">
                <span>C栋3楼仓库</span>
                <span class="status-normal">在线</span>
            </div>
            <div class="video-content">
                <img src="https://picsum.photos/800/600?random=3" alt="监控画面">
                <button class="fullscreen-btn" onclick="toggleFullscreen(this)">⛶</button>
            </div>
            <div class="video-footer">
                <button class="operation-btn play-btn">播放</button>
                <button class="operation-btn record-btn">录像</button>
                <button class="operation-btn snapshot-btn">截图</button>
            </div>
        </div>
    </div>

    <!-- 新增/编辑摄像头弹窗 -->
    <div class="modal-mask" id="modalMask">
        <div class="modal">
            <div class="modal-header" id="modalTitle">添加监控摄像头</div>
            <div class="modal-body">
                <input type="hidden" id="cameraId" />
                <div class="form-group">
                    <label for="cameraName">摄像头名称：</label>
                    <input type="text" id="cameraName" placeholder="如：A栋1楼大厅" />
                </div>
                <div class="form-group">
                    <label for="location">安装位置：</label>
                    <input type="text" id="location" placeholder="请输入详细位置" />
                </div>
                <div class="form-group">
                    <label for="ipAddress">IP地址：</label>
                    <input type="text" id="ipAddress" placeholder="如：192.168.1.100" />
                </div>
                <div class="form-group">
                    <label for="status">状态：</label>
                    <select id="status">
                        <option value="在线">在线</option>
                        <option value="离线">离线</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="installDate">安装日期：</label>
                    <input type="date" id="installDate" />
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn-cancel" onclick="closeModal()">取消</button>
                <button class="btn-save" onclick="saveCamera()">保存</button>
            </div>
        </div>
    </div>
</div>

<script>
    // 页面加载时加载监控数据
    $(document).ready(function() {
        loadCameraData();
    });

    // 加载摄像头数据
    function loadCameraData() {
        // 实际项目中通过AJAX从后端获取数据
        // $.get("CameraServlet?action=list", function(data) {
        //     if (typeof data === "string") {
        //         data = JSON.parse(data);
        //     }
        //     renderCameraList(data);
        // }).fail(function() {
        //     alert("加载监控数据失败，请重试");
        // });
    }

    // 渲染摄像头列表
    function renderCameraList(cameras) {
        var container = $("#videoContainer");
        container.empty();
        cameras.forEach(function(camera) {
            var statusClass = camera.status === "在线" ? "status-normal" : "status-error";
            container.append(`
                    <div class="video-card">
                        <div class="video-header">
                            <span>${camera.cameraName}</span>
                            <span class="${statusClass}">${camera.status}</span>
                        </div>
                        <div class="video-content">
                            <img src="https://picsum.photos/800/600?random=${camera.id}" alt="监控画面">
                            <button class="fullscreen-btn" onclick="toggleFullscreen(this)">⛶</button>
                        </div>
                        <div class="video-footer">
                            <button class="operation-btn play-btn">播放</button>
                            <button class="operation-btn record-btn">录像</button>
                            <button class="operation-btn snapshot-btn">截图</button>
                        </div>
                    </div>
                `);
        });
    }

    // 显示添加弹窗
    function showAddModal() {
        $("#modalTitle").text("添加监控摄像头");
        $("#cameraId").val("");
        $("#cameraName").val("");
        $("#location").val("");
        $("#ipAddress").val("");
        $("#status").val("在线");
        $("#installDate").val("");
        $("#modalMask").css("display", "flex");
    }

    // 保存摄像头信息
    function saveCamera() {
        var cameraId = $("#cameraId").val();
        var cameraName = $("#cameraName").val().trim();
        var location = $("#location").val().trim();
        var ipAddress = $("#ipAddress").val().trim();
        var status = $("#status").val();

        // 简单校验
        if (!cameraName) {
            alert("摄像头名称不能为空");
            return;
        }
        if (!location) {
            alert("安装位置不能为空");
            return;
        }
        if (!ipAddress) {
            alert("IP地址不能为空");
            return;
        }

        var action = cameraId ? "update" : "add";
        var data = {
            action: action,
            cameraName: cameraName,
            location: location,
            ipAddress: ipAddress,
            status: status,
            installDate: $("#installDate").val()
        };
        if (cameraId) {
            data.id = cameraId;
        }

        // 实际项目中提交到后端
        // $.post("CameraServlet", data, function(res) {
        //     if (typeof res === "string") {
        //         res = JSON.parse(res);
        //     }
        //     if (res.success) {
        //         alert("操作成功！");
        //         loadCameraData();
        //         closeModal();
        //     } else {
        //         alert("操作失败：" + res.error);
        //     }
        // }).fail(function() {
        //     alert("网络异常，请重试");
        // });

        // 模拟成功
        alert("操作成功！");
        closeModal();
    }

    // 全屏切换
    function toggleFullscreen(btn) {
        var videoContent = btn.parentElement;
        if (!document.fullscreenElement) {
            videoContent.requestFullscreen().catch(err => {
                alert(`全屏切换失败: ${err.message}`);
            });
        } else {
            document.exitFullscreen();
        }
    }

    // 关闭弹窗
    function closeModal() {
        $("#modalMask").hide();
    }
</script>
</body>
</html>